<template>
  <div class="top-nav"  :style="{height: height + 'px'}">
    <el-row>
      <el-col :span="4">
        <div class="title">粤教AI小助手</div>
      </el-col>
      <el-col :span="20">
        <div class="user-info">
          <el-dropdown>
            <span class="el-dropdown-link" style="color: #FFFFFF">
              个人中心<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <router-link class="dropdown-item" to="/user/info">个人中心</router-link>
              </el-dropdown-item>
              <el-dropdown-item>
                <router-link class="dropdown-item" to="/user/history">操作记录</router-link>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div class="user-image" :style="{height: height + 'px',lineHeight: height + 'px',float:'right',marginRight: '10px',marginTop: '10px'} ">
          <img :style="{height: '80%',width: 'auto'}" :src="userImage">
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {right} from "core-js/internals/array-reduce";

export default {
  name: 'TopNav',
  methods: {right},
  data(){
    return{
      msg: 'topNav',
      height: 50,
      userImage: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
    }
  },
}
</script>

<style scoped>
.top-nav{
  margin: 0;
  padding: 0;
}
.dropdown-item{
  text-decoration: none;
  color: #161711;
}
.title{
  text-align: left;
  margin-left: 20px;
  font-size: 20px;
}
.user-image{

}
.user-info{
  float: right;
  margin-right: 10px;
  cursor: pointer;
  color: #FFFFFF !important;
}
</style>
